import React from 'react';

import {format} from 'date-fns'
import {DataTypes, EchartColors} from '@assets/config/global_config.js';
import Tools from '@untils/tools.jsx';
// echart
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legendScroll';

class EchartBars extends React.Component {

    constructor(props) {
        super(props);
        this.echartDom = null;
        this.historyEchart = null;
    }

    componentDidMount() {
        this.echartConfig();
    }

    echartConfig() {
        this.historyEchart = echarts.init(this.echartDom);
        let {data} = this.props;
        let result = Tools.arrLargest(data, 'createTime', 1).result;
        let xAxisData = result.map(item => format(item.createTime, 'YYYY-MM-DD'));
        let seriesData = Object.keys(DataTypes).map(item => {
            let obj = {
                name: DataTypes[item],
                type: 'bar', barGap: '50%',
                label: {normal: {position: 'top', distance: 10}}
            };
            let data = [];
            for (let i = 0; i < result.length; i++) {
                let currentValue = result[i][item + 'Duration'];
                let dataItem = {
                    label: {show: currentValue > 0},
                    value: currentValue
                };
                data.push(dataItem);
            }
            obj.data = data;
            return obj;
        });
        let option = {
            title: {
                text: '处理总时长/h',
                top: 0,
                left: 'left',
                textStyle: {
                    color: '#fff',
                    fontSize: 12
                }
            },
            color: EchartColors,
            tooltip: {
                trigger: 'axis',
                backgroundColor: '#3d83fe',
                padding: [5, 10],
                formatter: "{b}<br>{a0}时长:&nbsp;&nbsp;&nbsp;&nbsp;{c0} h <br>{a1}时长:&nbsp;&nbsp;&nbsp;&nbsp;{c1} h <br>{a2}时长:&nbsp;&nbsp;&nbsp;&nbsp;{c2} h",
                axisPointer: {
                    type: 'shadow',
                    shadowStyle: {color: 'rgba(255, 255, 255, .08)'}
                }
            },
            grid: {
                left: 40, right: 20, top: 60, bottom: 25
            },
            legend: {right: 20, itemWidth: 14, itemHeight: 14, textStyle: {color: '#fff'}, selectedMode: false},
            toolbox: {show: true, orient: 'vertical', left: 'right', top: 'center'},
            calculable: true,
            xAxis: [{
                type: 'category',
                axisLine: {show: false},
                axisLabel: {textStyle: {color: '#7484cb'}},
                axisTick: {show: false},
                data: xAxisData
            }],
            yAxis: [{
                type: 'value',
                axisLine: {show: false},
                axisTick: {show: false},
                axisLabel: {textStyle: {color: '#7484cb'}},
                splitLine: {lineStyle: {color: '#212e5d'}}
            }],
            series: seriesData
        };
        this.historyEchart.setOption(option, true);
    }

    render() {
        return <div className="echart-box"
                    ref={(node) => this.echartDom = node}></div>
    }
}

export default EchartBars;